<template>
  <div class="record">
    <h2 class="title">患者就诊记录</h2>
    <div class="head-info">
      <div class="info-item"><label>患者姓名：</label><span>{{$route.query.name}}</span></div>
      <div class="info-item"><label>性别：</label><span>{{$route.query.gender}}</span></div>
      <div class="info-item"><label>年龄：</label><span>{{$route.query.age}}</span></div>
      <div class="info-item"><label>电话：</label><span>{{$route.query.telephone}}</span></div>
    </div>
    <div>
      <recordSearchForm :onSearch="onSearch" :onReset="onReset" />
    </div>
    <Table
				size="small"
				:columns="columns"
				:data="dataSource"
				no-data-text="未查询到符合条件的记录"
				stripe
			></Table>
    <div class="page">
        <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="onPageChange"/>
    </div>
    <div class="btn-group">
      <Button style="width: 100px" @click="handleBack">
        <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
      </Button>
    </div>
  </div>
</template>

<script>
import recordSearchForm from "./components/recordSearchForm";
import api from "@/api/commonApi";
import Utils from '@/utils';
export default {
  components: {
    recordSearchForm,
  },
  data() {
    const that = this;
    return {
      filterObj: {},
      // table相关
      columns: [
        { title: '排序', type: 'sum', width: 80, align: 'center', 
          render: (h, params) => {
              let sum = (this.pageNo-1)*this.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        { title: '就诊时间', key: 'createTime',align: 'center', },
        { title: '支付金额（元）', key: 'amt',align: 'center',width: 90, },
        {
          title: '咨询形式', key: 'inquiryType', align: 'center',render(h, record) {
            return ['图文', '语音', '视频'][record.row.inquiryType];
          }
        },
        {
          title: '就诊类型', key: 'serviceType', align: 'center',width: 90,render(h, record) {
            return ['咨询', '问诊', '复诊', '续方', '药品咨询'][record.row.serviceType];
          }
        },
        { title: '医生', key: 'doctorName',align: 'center' },
        { title: '医生所属机构', key: 'hospitalName',align: 'center' },
        { title: '状态', key: 'statusName',align: 'center', 
          render(h, record) {
            // return ['','问诊中', '已完成', '已退诊', '待接诊', '待付款','已取消'][record.row.status];
            return ['待支付','待接诊', '就诊中', '已完成', '拒绝接诊', '爽约','已取消'][record.row.status+1];
          }
        },
        {
          title: '设置', key: '_operate',align: 'center', render(h, record) {
            return h('a', {
              type: 'text',
              on: {
                click() {
                  const query = that.$route.query;
                  query.id = that.$route.query.id;
                  query.serviceId = record.row.serviceId
                  query.servertype  = record.row.serviceType
                  that.$router.push({
                    path: '/index/publicOperation/patientInformation/chatRecord',
                    query: that.$route.query
                  })
                }
              }
            }, '查看记录')
          }
        },
      ],
      dataSource: [],
      count: 0,
      pageSize: 10,
      pageNo: 1,
    }
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "患者运营管理"
      },
      {
        path: "/index/publicOperation/patientInformation/list",
        title: "患者信息查询"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
    this.operateinqfindPageByOperate(pageNo);
  },
  methods: {
    onSearch(values) {
      this.pageNo = 1
      this.filterObj = values;
      this.operateinqfindPageByOperate(this.pageNo);
    },
    onReset() {
      this.pageNo = 1
      this.filterObj = {};
      this.operateinqfindPageByOperate();
    },
     onPageChange() {
      this.operateinqfindPageByOperate();
    },
    handleBack() {
      this.$router.push({
        path: '/index/publicOperation/patientInformation/list'
      });
    },
    //就诊记录查询
    operateinqfindPageByOperate() {
      const reqBody = {
        pid: this.$route.query.pid,
        pageNo: this.pageNo || 1,
        pageSize: this.pageSize || 10,
        createTimeStart: Utils.getNowDateBySpecialFormat(this.filterObj.fromTime),
        createTimeEnd: Utils.getNowDateBySpecialFormat(this.filterObj.endTime),
        inquiryType: this.filterObj.inquiryType,
        searchKey: this.filterObj.doctorName,
        status: this.filterObj.status,
      };
      this.$axios.post(api.findInqConPage, reqBody).then(res => {
        if (res.data.code === 1) {
          const {records, pageSize, pageNo, total} = res.data.object;
          this.dataSource = records;
          this.count =  total
        } else {
          this.$Message.info(res.data.message);
        }
      }).catch(() => {
      });
    },
    onPageChange(index) {
			this.pageNo = index;
			this.operateinqfindPageByOperate(index);
		},
  },
}
</script>

<style scoped lang="less">
.record {
    padding: 10px 30px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .tit {
        margin:10px 0;
        font-weight:bold;
        text-align:center;
    }
    .main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;   
        }      
        .w-select {
            width: 100px;
        }
        .box{
            padding: 0 30px;
        }
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
.title {
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
.head-info {
  display: flex;
  padding: 10px 0px 20px;
  .info-item {
    font-weight: bold;
    padding-right: 50px;
  }
}
.btn-group {
  text-align: center;
  margin: 40px 0 20px;
}
</style>